<template>
  <div>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check='false' offset="50">
        <!-- 文章列表 -->
        <ArticleItem v-for="(item,index) in articleList" :key='index' :art='item'
          @click.native="itemClickFn(item.art_id)">
          </ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getAllArticleListAPI } from '@/api'
import ArticleItem from './ArticleItem.vue'
export default {
  props: ['channel_id'],
  components: {
    ArticleItem
  },
  data () {
    return {
      articleList: [], // 文章列表数据
      isLoading: false, // 顶部加载状态
      loading: false, // 底部加载状态
      finished: false, // 底部完成状态
      nextTimestamp: new Date().getTime() // 下一次的时间戳
    }
  },
  methods: {
    // 底部加载事件方法
    onLoad () {
      this.getAllArticleList()
    },
    async getAllArticleList () {
      const result = await getAllArticleListAPI({
        channel_id: this.channel_id,
        timestamp: this.nextTimestamp
      })

      // 累加新数据
      this.articleList = [...this.articleList, ...result.data.data.results]
      this.nextTimestamp = result.data.data.pre_timestamp
      // 关闭加载状态
      this.loading = false
      // 数据加载完毕
      if (result.data.data.pre_timestamp === null) {
        this.finished = true
      }
      // 关闭顶部加载状态
      this.isLoading = false
    },
    // 下拉刷新
    onRefresh () {
      this.articleList = []
      this.nextTimestamp = new Date().getTime()
      this.getAllArticleList()
    },
    // 单元格点击事件
    itemClickFn (id) {
      this.$router.push({
        path: `/article_detail?art_id=${id}`
      })
    }
  },
  async created () {
    this.getAllArticleList()
  }
}
</script>
